<template>
    <div class="page">
        <div class="jumbotron">
          <h1>indexedDB</h1>
          <h2>
              在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃，而HTML5的支持的本地存储实际上变成了

Web Storage（Local Storage和Session Storage）与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心，IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。
            </h2>
            <h2>随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。</h2>
            <h2>现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。</h2>
            <p>通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。</p>

            
        </div>
        <h1>概述：</h1>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="desc" label="特点" width="180">
                <template slot-scope="scope">
                    <el-tag>{{scope.row.desc}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="val" label="明细">
                 <template slot-scope="scope">
                    <div v-html="scope.row.val"></div>
                </template>
            </el-table-column>
        </el-table>

        <h1>基本概念</h1>
        <p class="mb-40">
            IndexedDB 是一个比较复杂的 API，涉及不少概念。它把不同的实体，抽象成一个个对象接口。学习这个 API，就是学习它的各种对象接口。
        </p>

        <!-- <el-card shadow="hover" v-for="(item,index) in ul1" :key="index" class=" box-card text mb-20">
            <div >
                {{item}}
            </div>
        </el-card> -->


      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item v-for="(item,index) in ul1" :key="index"   :name="index+1">
          <template slot="title">
            <div class="title">
              <i class="header-icon el-icon-info"></i> {{item.title}}
            </div>
          </template>
          <!-- <div>{{item.title}}</div> -->
          <div>{{item.desc}}</div>
        </el-collapse-item>
        <!-- <el-collapse-item title="反馈 Feedback" name="2">
          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
        </el-collapse-item>
        <el-collapse-item title="效率 Efficiency" name="3">
          <div>简化流程：设计简洁直观的操作流程；</div>
          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
        </el-collapse-item>
        <el-collapse-item title="可控 Controllability" name="4">
          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
        </el-collapse-item> -->
      </el-collapse>

      <hr>
      <p class="p1 mb-20">
        在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式，比如打开数据库的操作
      </p>


      <h2 class="mb-10">IndexedDB 是一个作为API宿主的全局对象，由于api可能仍在变化，浏览器也都有提供商前缀
        因此，这个对象在IE10叫msIndexedDB,在firefox4 叫mozIndexedDB,在chrome中叫
        webkitIndexedDB。为了兼容期间，可以这样处理
      </h2>
      <p class="code">
        var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB ||
        window.webkitIndexedDB
      </p>

      <h1>1.打开/新建数据库</h1>
      <p class="p1 mb-20">
        使用indexedDB 的第一步，是打开它， 就是把要打开的数据库名传给，indexDB.open('db_name');
        如果传入的数据库已经存在，就会发送一个打开它的请求，如果不存在，就是创建打开。
        使用 indexDB.open()，会返回一个 IDBRequest对象，在它这个对象上可以添加onerror 和onsucess事件处理程序
      </p>

      <p class="code">
        var request,database;
      </p>
      <p class="code mb-10">request = indexedDB.open('admin')</p>
      <p class="code mb-10">request.onerror = function(){
        <br/>
          <span class="space"></span> console.log('open db error')  
        <br/>
      }</p>

      <p class="code mb-10">request.onsuccess = function(event){
        <br/>
          <span class="space"></span> database = event.target.result;
        <br/>
      }</p>

      <p class="p1">
        在这两个事件处理程序中，event.target 都会 指向request对象，因此他们可以互换使用。如果响应的是onsuccess事件，那么target.event.result中就会有一个数据库实例对象
        IDBDATA-base 这个对象会保存在database变量中。如果发生了错误，那么event.target.errorCode中将保存一个错误码。
        <!-- <img src="../../images/error-1" alt="" class="error-1"> -->
      </p>








    </div>
</template>

<script>
export default {
  name: "share2",
  methods: {
    handleChange(val) {
        console.log(val);
      }
  },
  data() {
    return {
      activeNames: ['1'],
      img1: require("../../images/1.jpg"),
      cssimg: require("../../images/12.png"),
      ul1:[
        {title:'数据库：IDBDatabase 对象',desc:'数据库是一系列相关数据的容器。每个域名（严格的说，是协议 + 域名 + 端口）都可以新建任意多个数据库。IndexedDB 数据库有版本的概念。同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。'},
        {title:'对象仓库：IDBObjectStore 对象',desc:'每个数据库包含若干个对象仓库（object store）。它类似于关系型数据库的表格。'},
        {title:'索引： IDBIndex 对象',desc:'为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。'},
        {title:'事务： IDBTransaction 对象',desc:'数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。'},
        {title:'操作请求：IDBRequest 对象',desc:''},
        {title:'指针： IDBCursor 对象',desc:''},
        {title:'主键集合：IDBKeyRange 对象',desc:''}
      ],
      tableData: [
        {
          desc: "键值对储存",
          val:
            "IndexedDB 内部采用对象仓库（object store）存放数据。<a class='tags'>所有类型的数据</a>都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以'键值对'的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。"
        },
        {
          desc: "异步",
          val:
            " IndexedDB 操作时<a class='tags'>不会锁死浏览器</a>，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。"
        },
        {
          desc: "支持事务",
          val:
            " IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。"
        },
        {
          desc: "同源限制",
          val:
            " IndexedDB 受到<a class='tags'>同源限制</a>，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。"
        },
        {
          desc: "储存空间大",
          val:
            "  IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 <a class='tags'>250MB</a>，甚至没有上限。"
        },
        {
          desc: "支持二进制储存",
          val:
            "  IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。"
        }
      ]
    };
  },
  created() {
    var request = window.indexedDB.open('testB');
    console.log(request,'this is a testB db')
    
  },


};
</script>

<style>
.page {
  padding: 20px;
}
.title{
  font-size: 20px;
}
</style>

